<template>
  <div>
    <div class="box1">
      <div class="block">
        <!-- 轮播图 -->
        <lo :img="img"></lo>
      </div>
      <div class="box">
        <div class="da">
          <div class="db">
            <img class="im" src="@/assets/sj.png" alt="" />
          </div>
          <div class="dc">
            <!-- 单个商品 -->
            <div class="dc1" v-for="(item, index) in list" :key="index">
              <!-- 组件 每个商品都是一个单独的组件  -->
              <list2 :item="item"></list2>
            </div>

            <div class="dc1"><p class="ph">查看更多>></p></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import lo from "./taj/tttu";
import list2 from "@/views/ht/home/taj/tttu2";
export default {
  components: {
    lo,
    list2,
  },
  data() {
    return {
      list: [],
      img: [],
    };
  },
  mounted() {
    this.hq();
  },
  methods: {
    hq() {
      //获取轮播图
      this.$axios.post("/api/resources/carousel", {}).then((a) => {
        if (a.code == "001") {
          this.img = a.carousel;
          this.img.map((a) => {
            return (a.imgPath = `http://47.115.85.237:3000/${a.imgPath}`);
          });
        }
      });

      //   获取热门
      this.$axios
        .post("/api/product/getHotProduct", {
          categoryName: [
            "电视机",
            "空调",
            "洗衣机",
            "保护套",
            "保护膜",
            "充电器",
            "充电宝",
          ],
        })
        .then((a) => {
          // 获取数据
          const { Product: list } = a;
          // 如果成功
          if (a.code == "001") {
            this.list = list;
            this.list.map((a) => {
              return (a.product_picture = `http://47.115.85.237:3000/${a.product_picture}`);
            });
            // console.log(this.list);
          }
        });
    },
  },
};
</script>
<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6c4;
}
.d1 {
  margin-top: 50px;
  width: 100%;
  height: 30px;
}
.box1 {
  width: 100%;
  background: #f5f4f6;
}
.box {
  width: 90%;
  margin: auto;
}
img {
  width: 100%;
  height: 100%;
}
.da {
  padding-top: 60px;
  width: 100%;
  display: flex;
}
.db {
  width: 17%;
  height: 570px;
  display: inline-block;
  display: flex;
}
.dc {
  display: inline-block;
  display: flex;
  flex-wrap: wrap;
  width: 82.5%;
  height: 600px;
}
.dc1 {
  width: 17.5%;
  background: #ffffff;
  margin-left: 2.5%;
  margin-bottom: 20px;
  height: 268px;
}
.im {
  width: 100%;
  height: 100%;
}
.img {
  width: 100%;
  height: 62%;
}
.s1 {
  margin-left: 5.5%;
  color: #99a9bf;
  text-decoration: line-through;
}
.dc1:hover {
  width: 17.5%;
  background: #ffffff;
  margin-left: 2.5%;
  margin-bottom: 20px;
  height: 268px;
  box-shadow: 2px 2px 10px #cfcfcf, 5px 5px 20px #000;
}
p {
  margin: 0;

  text-align: center;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  margin: auto;
  width: 90%;
  margin-top: 5%;
}

.pa1 {
  color: #000;
}
.pa2 {
  color: #99a9bf;
}
.pa3 {
  color: red;
}
.ph{
  margin-top: 30%;
  text-align: center;
}
</style>